<template>
 <div class="step">
     <div class="stepitem "  :class=" step>=1?'active':''">
       <div class="item"  >
             <p> <span class="line"></span><span><i class="iconfont "  :class=" step>=1?'icon-xuanze':'icon-icon-test'"></i>步骤1</span></p>
                    绑定微信提现
       </div>
     </div>
     <div class="stepitem" :class=" step>=2?'active':''">
       <div class="item">
             <p> <span class="line"></span><span><i class="iconfont icon-2"  :class=" step>=2?'icon-xuanze':'icon-2'"></i>步骤2</span></p>
                输入提现金额
       </div>
     </div>
     <div class="stepitem  last"  :class="  step>=3?'active':''">
         <p><span><i class="iconfont icon-3"   :class=" step>=3?'icon-xuanze':'icon-3'"></i>步骤3</span></p>
         提现结果
     </div>
     
 </div>  
</template>
<script>
export default {
  name: "step",
  props: {
    step: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      stepnumber: 0
    };
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
$bg: #fffbef;
$active: #12d612;;
$default:#d0c2c2;
.step {
  display: flex;
  justify-content: center;
  padding: 10px 0px 20px 0px;
  background: $bg;
  flex-flow: row; /*伸缩项目单行排列*/
  .stepitem.last {
    padding: 0;
    flex: none;
    width: 7.272727rem;
  }

  .stepitem {
    flex: 1;
    padding: 0 10px;
    font-size: 1.090909rem;
     color: $default;
    &.active {
       color: $active;
      p {
         color: $active;
         i{
            color: $active;
         }
        span {
          color: $active;
        }
      }
      .line {
        background: $active;
      }
    }
    p {
      position: relative;
      font-size: 1.454545rem;
      line-height: 1.7;
      height: 3.636364rem;
       color: $default;
      span {
        position: absolute;
        top: 0;
        z-index: 12;
        background: $bg;
        padding-right: 10px;
        color: $default;
        i {
          font-size: 2rem;
          color: $default;
        }
      }
      .line {
        content: "";
        display: block;
        height: 2px;
        width: 100%;
        top: 50%;
        position: absolute;
        background: $default;
        z-index: 2;
      }
    }
  }
}
</style>

